import React from "react";
import {Modal, Form, Input, Radio, Select, message} from 'antd';
import {
    _addRole,
    _addSysUser,
    _deleteSysUser,
    _getRolePullDown,
    _updateRole,
    _updateSysUser
} from "../../../utils/apiList";
import menuList from "../../../utils/staticVariable";

const {TextArea} = Input;
const {Option} = Select;

const layout = {
    labelCol: {
        span: 8,
    },
    wrapperCol: {
        span: 16,
    },
};

const CollectionCreateForm = Form.create({name: 'form_in_modal'})(
    class extends React.Component {
        render() {
            const {visible, onCancel, onCreate, form} = this.props;
            const {getFieldDecorator} = form;
            const options = Object.keys(menuList).map(key => <Option key={key.toString()}>{menuList[key]}</Option>);
            return (
                <Modal
                    visible={visible}
                    title="修改权限信息"
                    okText="提交"
                    cancelText="取消"
                    onCancel={onCancel}
                    onOk={onCreate}
                    centered
                    bodyStyle={{maxHeight: '70vh', overflow: 'scroll'}}
                >
                    <Form layout="vertical">
                        <Form.Item label="角色名">
                            {getFieldDecorator('roleName', {
                                rules: [{required: true, message: '请填写登录用户名!'}],
                            })(<Input/>)}
                        </Form.Item>
                        <Form.Item label="权限代码">
                            {getFieldDecorator('roleCode', {
                                rules: [{required: true, message: '请填写登录用户名!'}],
                            })(<Input/>)}
                        </Form.Item>
                        <Form.Item label="权限关联菜单">
                            {getFieldDecorator('menuIds')(<Select mode="multiple">{options}</Select>)}
                        </Form.Item>
                    </Form>
                </Modal>
            );
        }
    },
);

class EditModal extends React.Component {
    constructor(props) {
        super(props);
        this.state = {visible: false, editRecord:{}};
    }

    showModal = (editRecord) => {
        this.setState({visible: true, editRecord});
        this.handleLoad(editRecord);
    };

    handleCancel = () => {
        this.setState({visible: false});
    };

    handleCreate = () => {
        const {editRecord} = this.state;
        const {form} = this.formRef.props;
        form.validateFields((err, values) => {
            if (err) {
                return;
            }
            const params = values;
            console.log(editRecord);
            params.id = editRecord.role.id;
            params.roleLevel = 0;
            _updateRole(params).then((res) => {
                if (res.data.success) {
                    message.success(<b>新增成功</b>, 3);
                    form.resetFields();
                    this.setState({visible: false});
                    this.props.parent.loadTable();
                } else {
                    message.error(<b>{res.data.msg}</b>, 3);
                }
            }).catch(error => {
                message.error(<b>请求失败！</b>, 3);
            });
        });
    };

    handleLoad = (editRecord) => {
        const {form} = this.formRef.props;
        form.setFieldsValue({
            roleName: editRecord.role.roleName,
            roleCode: editRecord.role.roleCode,
            menuIds: editRecord.menuIds.join(',').split(','),
        });
    };

    saveFormRef = formRef => {
        this.formRef = formRef;
    };

    render() {
        const {visible} = this.state;
        return (
            <CollectionCreateForm
                wrappedComponentRef={this.saveFormRef}
                visible={visible}
                onCancel={this.handleCancel}
                onCreate={this.handleCreate}
            />
        );
    }
}

export default EditModal;